<template>
    <!-- 搜索工具栏 -->
    <div>
        <el-form :inline="true" :label-width="labelWidth">
            <el-form-item 
                v-for="(field, index) in columns" 
                :label="field.label" 
                :key="index"
                >
                <component 
                    :is="field.el" 
                    :value.sync="queryData[field.value]" 
                    :option="field.option"
                    />
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import numInput     from '@/components/IvFormTemp/ivNumInput'
import strInput     from '@/components/IvFormTemp/ivStrInput'
import ivSelect     from '@/components/IvFormTemp/ivSelect'
import ivDatePicker from '@/components/IvFormTemp/ivDatePicker'
import ivButton     from '@/components/IvToolbar/ivButton'

export default {
    name: 'iv-search-bar',
    components: { 
            numInput,
            strInput,
            ivSelect,
            ivDatePicker,
            ivButton
        },
    props: {
        query: {
            type: Object,
            default: () => {}
        },
        columns: {
            tyep: Array,
            default: () => []
        },
        labelWidth: {
            type: String,
            default: '80px'
        }
    },
    computed: {
        queryData: {
            get(){
                return this.query
            },
            set(val){
                this.$emit('update:query', val)
            }
        }
    }
}
</script>
